import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import Box from '../box/box.jsx';
import CloseButton from '../close-button/close-button.jsx';
import Spinner from '../spinner/spinner.jsx';
import styles from './alert.css';

const closeButtonColors = {
    ['info']: CloseButton.COLOR_GREEN,
    ['warn']: CloseButton.COLOR_ORANGE
};

const AlertComponent = ({
    content,
    level,
    icon,
    closeButton,
    onCloseAlert,

    extensionName,
    onReconnect,
    showReconnect
}) => (
    <Box className={classNames(styles.alert, styles[level])}>
        {icon && (//如果存在icon，要么是spinner，要么是一个图标URL
            <div className={styles.iconSection}>
                {icon=='spinner'? (
                    <Spinner
                        className={styles.alertSpinner}
                        level={level}
                    />
                ) : (
                    <img
                        className={styles.alertIcon}
                        src={icon}
                    />
                )}
            </div>
        )}


        <div className={styles.alertMessage}>
            {extensionName ? `Scratch与${extensionName}的连接已断开。` : content}
        </div>

        <div className={styles.alertButtons}>
            {showReconnect && (
                <button
                    className={styles.alertConnectionButton}
                    onClick={onReconnect}
                >
                    重新连接
                </button>
            )}

            {closeButton && (
                <Box className={styles.alertCloseButtonContainer}>
                    <CloseButton
                        className={styles.alertCloseButton}
                        color={closeButtonColors[level]}
                        size={CloseButton.SIZE_LARGE}
                        onClick={onCloseAlert}
                    />
                </Box>
            )}

        </div>
    </Box>
);

AlertComponent.propTypes = {
    content: PropTypes.string,
    icon: PropTypes.string,
    level: PropTypes.string,

    closeButton: PropTypes.bool,
    onCloseAlert: PropTypes.func,
    
    extensionName: PropTypes.string,
    onReconnect: PropTypes.func,
    showReconnect: PropTypes.bool,
};

AlertComponent.defaultProps = {
    level: 'warn'
};

export default AlertComponent;
